<template>
  <div id="app">
    <router-view></router-view>
    <!-- 具名插槽 
     <chacao>
      <template v-slot:header>
        <header>标题</header>
      </template>
      <template v-slot:main="{ t }">
        <h2>具名插槽作用域：{{ t }}</h2>
        <main>内容</main>
      </template>
      <template v-slot:footer>
        <footer>底部</footer>
      </template>
       不写名字就是默认的slot 
      <template v-slot="{ o }">
        {{aa}} 
      <h1>希望遇到好的面试官：{{ o.name }}</h1>
      </template>
    </chacao>   -->

    <!-- <Parent/>
    <Other/> -->
    <!-- <Tab/> -->
    <Goods />
    <!-- <trans></trans> -->
    <!-- <usuallyUse></usuallyUse> -->
  </div>
</template>

<script>
import Parent from "./Parent";
import chacao from "./chacao.vue";
import modal from "@/components/modal";
import Other from "@/components/Other";
import Tab from "@/components/Tab"
import Goods from "@/components/goods"
import trans from "@/components/trans"
import usuallyUse from "@/components/usuallyUse"
// var eventBus = new Vue()
export default {
  data() {
    return {
      // state: false,
      msg:"vue从入门到放弃"
    }
  },
  name: "App",
  components: {
    Parent,
    chacao,
    modal,
    Other,
    Tab,
    Goods,
    trans,
    usuallyUse
  }
};
</script>

<style>
.open {
  width: 100px;
  height: 30px;
  background: skyblue;
  color: white;
  border: none;
  border-radius: 20px;
}
</style>
